<template>
    <div id="big-index">
    <dv-full-screen-container class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
            <a-row>
                <a-col :span="24">
                <div class="d-flex jc-center">
                    <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
                        <div class="title">
                            <span class="title-text">ST_ADMIN数据监控平台</span>
                            <dv-decoration-6
                                    class="title-bototm"
                                    :reverse="true"
                                    :color="['#50e3c2', '#67a1e5']"
                                    style="width:5rem;height:.1rem;"
                            />
                        </div>
                        <dv-decoration-8
                                :reverse="true"
                                :color="['#568aea', '#000000']"
                                style="width:2.5rem;height:.625rem;"
                        />
                    </div>
                    <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
                </div>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="4">
                    <div>
                        <dv-border-box-12>
                            <centerLeft1 />
                        </dv-border-box-12>
                    </div>
                </a-col>
                <a-col :span="4">
                    <div>
                        <dv-border-box-12>
                            <centerLeft2 />
                        </dv-border-box-12>
                    </div>
                </a-col>
                <a-col :span="8">
                    <!-- 中间 -->
                    <div>
                        <center />
                    </div>
                </a-col>
                <a-col :span="4">
                    <div>
                        <centerRight2 />
                    </div>
                </a-col>
                <a-col :span="4">
                    <div>
                        <dv-border-box-13>
                            <centerRight1 />
                        </dv-border-box-13>
                    </div>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <dv-border-box-13 style="height: 50vh">
                        <bottomLeft />
                    </dv-border-box-13>
                </a-col>
                <a-col :span="12">
                    <dv-border-box-12 style="height: 50vh">
                        <bottomRight />
                    </dv-border-box-12>
                </a-col>
            </a-row>
        </div>
    </dv-full-screen-container>
    </div>
</template>

<script>
    import { formatTime } from '../utils/index.js'
    import centerLeft1 from "./big_screen_main/centerLeft1";
    import centerLeft2 from "./big_screen_main/centerLeft2";
    import centerRight1 from "./big_screen_main/centerRight1";
    import centerRight2 from "./big_screen_main/centerRight2";
    import center from "./big_screen_main/center";
    import bottomLeft from "./big_screen_main/bottomLeft";
    import bottomRight from "./big_screen_main/bottomRight";
    export default {
        data () {
            return {
                loading: true,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            };
        },
        components: {
            centerLeft1,
            centerLeft2,
            centerRight1,
            centerRight2,
            center,
            bottomLeft,
            bottomRight
        },
        mounted () {
            this.timeFn();
            this.cancelLoading();
        },
        methods: {
            timeFn () {
                setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
            cancelLoading () {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            },
            toPage(item){
                console.log(item)
                this.$router.push({
                    path: '/big_screen_main' + item.path
                })
            }
        }
    };
</script>
<style>
    @import "../assets/css/big_screen_main.less";
</style>
<style scoped>
    #index{
        width: 100%;
        height: 100%;
    }
    .bg {
        background-image: url("../assets/pageBg.png");
    }
</style>
